<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="emailDialogVisible"
      width="30%"
      :before-close="close">
      <el-form ref="emailForm"
               :model="emailForm"
               :rules="emailRule">
        <el-form-item 
                    v-if="emailInfo.email"
                      label="原邮箱">
          <el-input disabled
                    v-model="emailInfo.email"></el-input>
        </el-form-item>

        <el-form-item v-if="emailInfo.stype=='1'"
                      required
                      prop="code"
                      label="请输入验证码">
          <el-row :gutter="20">
            <el-col :span="19">
              <el-input v-model="emailForm.code"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button @click="handlePuhuCode"
                        :loading='codeShow'
                        type="primary">
                        <template v-if="times && times!=60">
                          {{times}}
                        </template>
                        <template v-else>发送验证码</template>
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <template v-else>
          <el-form-item 
                      required
                      prop="email"
                      label="新邮箱">
            <el-row :gutter="20">
              <el-col :span="19">
                <el-input v-model="emailForm.email"></el-input>
              </el-col>
              <el-col :span="5">
                <el-button @click="handlePuhuCode"
                        :loading='codeShow'
                        type="primary">
                        <template v-if="times && times!=60">
                          {{times}}
                        </template>
                        <template v-else>发送验证码</template>
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item required
                        prop="code"
                        label="请输入验证码">
            <el-input v-model="emailForm.code"></el-input>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="dialogVisible">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pushCode,
  relieveEmail,
  changeEmail,
  changeEmailspare,
} from '../index.js';
  export default {
    props:{
      emailDialogVisible:Boolean,
      emailInfo:Object,
      title:String,
    },
    data() {
      return {
        emailForm:{},
        codeShow:false,
        times:60,
        emailRule: {
          email:[{ required: true, message: '请输入', trigger: 'change' }],
          code: [{ required: true, message: '请输入', trigger: 'change' }],
        },
      }
    },
    methods: {
      close(){
        this.$emit('close');
      },
      handlePuhuCode () {
        const data = this.emailForm.email;
        if (!data&&this.emailInfo.stype!='1') {
          this.$message.warning('请先新输入邮箱');
          return
        }
        this.codeShow = true;
        let formData = new FormData();
        formData.append('email', data);
        if(this.emailInfo.stype=='1'){ // 解绑事件
          formData.set('email',this.emailInfo.email);
        }
        pushCode(formData).then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.timer = setInterval(()=>{
              this.times--
              if(this.times==0){
                this.codeShow = false;
                this.times=60;
                clearInterval(this.timer);
              }
            },1000)
          }
        }).catch(err=>{
           this.codeShow = false;
        })
      },//发送验证码

      dialogVisible(){
        this.$refs.emailForm.validate((valid) => {
          if (valid) {
            let formData = new FormData();
            formData.append('email', this.emailForm.email);
            formData.append('code', this.emailForm.code);
            if(this.emailInfo.stype=='1'){ // 解绑事件
              formData.set('email',this.emailInfo.email);
              relieveEmail(formData).then(res=>{
                if (res.data.meta.success)this.$message.success(res.data.meta.message);
              })
            }else if(this.emailInfo.stype=='changeF'||this.emailInfo.stype=='bindingF'){
              changeEmail(formData).then(res=>{
                if (res.data.meta.success)this.$message.success(res.data.meta.message);
              })
            }else if(this.emailInfo.stype=='changeS'||this.emailInfo.stype=='bindingS'){
              changeEmailspare(formData).then(res=>{
                if (res.data.meta.success)this.$message.success(res.data.meta.message);
              })
            }
            this.$emit('submitEmailEnd')
          }
        });
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>